<template>
  <div class="upload">
      <div class="upload-wraper">
            <input
                ref="fileInput"
                type="file"
                accept="image/*"
                @change="onChangeFileHandler"
            />
            <div class="upload-img" v-if="headImg">
                <img :src="headImg"/>
                <div class="upload-img-mask"><span @click="handleUpload">重新上传</span></div>
            </div>
            <div class="upload-btn-wrap" @click="handleUpload" v-else>
                <i class="iconfont icon-shangchuan"></i><span>点击上传</span>
            </div>
            <div class="upload-tips">文件不能超过{{size}}</div>
      </div>
       <cropper-index :limitSize="5120" @on-error="onError" ref="cropperRef" title="头像编辑" :width="320" :height="320" :uploadFile="uploadFile"></cropper-index>
    </div>
</template>

<script setup>
import CropperIndex from '@/components/cropper/index'


</script>

<style lang="scss" scoped>

</style>